<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<link type="text/css" rel="stylesheet" href="../zxy/css/common/edit_win.css"/>
	<table id="zxy_ef_dg"></table>
	
	<div id="zxy_ef_tb" style="height:auto">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="zxy_ef_append()">添加</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="zxy_ef_remove()">删除</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="zxy_ef_edit()">编辑</a>
	</div>
	
	<!-- 编辑或添加的窗口 -->
	<div id="zxy_ef_win" class="easyui-window">
		<form id="zxy_ef_win_form" class="easyui-form" method="post">
			<input type="hidden" id="zxy_ef_id" name="id"/>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">姓名</span>
				<input id="zxy_ef_name" name="name" class="easyui-textbox zxy_edit_win_content" data-options="required:true"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">关系</span>
				<input id="zxy_ef_relationship" name="relationship" class="easyui-combobox zxy_edit_win_content" data-options="required:true"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">电话</span>
				<input id="zxy_ef_tel" name="tel" class="easyui-validbox zxy_edit_win_content"  data-options="validType:'mobile'"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">传真</span>
				<input id="zxy_ef_fax" name="fax" class="easyui-textbox zxy_edit_win_content"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">邮箱</span>
				<input id="zxy_ef_email" name="email" class="easyui-validatebox zxy_edit_win_content" data-options="validType:'email'"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">地址</span>
				<input id="zxy_ef_address" name="address" class="easyui-textbox zxy_edit_win_content"/>
			</div>
			<div class="zxy_edit_win">
				<span class="zxy_edit_win_title">备注</span>
				<input id="zxy_ef_remark" name="remark" class="easyui-textbox zxy_edit_win_content"/>
			</div>
		</form>
	</div>
	
	<script type="text/javascript">
		var zxy_ef_empId='${empId}';
		$("#zxy_ef_win").window({
			width:600,
		    height:400,
		    modal:true,
		    title:'编辑',
		    minimizable:false,
		    maximizable:false,
		    collapsible:false,
		    closed:true,
		    resizable:false,
		    tools:[{
				iconCls:'icon-save',
				handler:function(){
					if(!$("#zxy_ef_win_form").form("validate")){
						$.messager.alert("Warning","输入值无效");
						return;
					}
					$("#zxy_ef_win_form").form('submit',{
						onSubmit: function(param){
							param.empId=zxy_ef_empId;
							console.log(param);
					    },
					    success:function(data){
					    	data=$.parseJSON(data);
					    	console.log(data);
					    	$.messager.alert("",data.msg);
					    	$("#zxy_ef_win").window('close');
					    	$("#zxy_ei_emp_family_info").panel('refresh','../emp/empFamilyInfo?empId='+zxy_ef_empId);
					    },
					    error:function(){
					    	$.messager.alert("操作失败");
					    }
					});
				}
			},{
				iconCls:'icon-clear',
				handler:function(){
					$("#zxy_ef_win_form").form('reset');
				}
			}]
		    
		});
		$(".zxy_edit_win_content").textbox({
			width:'200',
			height:'30',
		});
		$("#zxy_ef_relationship").combobox({
				url:'../setting/findAllRelationshipByIfDisabled?ifDisabled=0',
				valueField:'relationshipId',
				textField:'relationship',
				editable:false
		});
		
		//验证规则
		$.extend($.fn.validatebox.defaults.rules, {
			//移动手机号码验证
			mobile: {//value值为文本框中的值
		        validator: function (value) {
		            var reg = /^1[3|4|5|8|9]\d{9}$/;
		            return reg.test(value);
		        },
		        message: '输入手机号码格式不准确.'
		    },
		    //国内邮编验证
		    zipcode: {
		        validator: function (value) {
		            var reg = /^[1-9]\d{5}$/;
		            return reg.test(value);
		        },
		        message: '邮编必须是非0开始的6位数字.'
		    },
		});
		
		
		var empFamilyInfos='${empFamilyInfos}';
		empFamilyInfos=$.parseJSON(empFamilyInfos);
		console.log(empFamilyInfos);
		$(function() {
			$('#zxy_ef_dg').datagrid({
				//请求地址
			    data:empFamilyInfos,
			    columns:[[
			    	{field:'',title:'',checkbox:true},
					{field:'name',title:'姓名',width:'15%',editor:'textbox'},
					{field:'relationshipSetting',title:'关系',width:'10%',
						formatter: function(value,row,index){
							return row.relationshipSetting.relationship;
						},
					},
					{field:'tel',title:'电话',width:'10%',align:'right',editor:'numberbox'},
					{field:'fax',title:'传真',width:'10%',align:'right',editor:'numberbox'},
					{field:'email',title:'邮箱',width:'10%',align:'right',editor:'numberbox'},
					{field:'address',title:'地址',width:'10%',align:'right',editor:'numberbox'},
					{field:'remark',title:'备注',width:'10%',align:'right',editor:'numberbox'},
			    ]],
			    /* width:800,
			    height:200, */
			    //fit:true
			    fitColumns:true,
			    //隔行变色
			    striped:true,
			    nowrap:true,
			    //显示行号
			    rownumbers:true,
			    //设置单选
			   // singleSelect:true,
			   /*  rowStyler: function(index,row){
					if (row.salary>=20000){
						return 'background-color:red;color:#fff;'; 
						
					}
				}, */
				toolbar:'#zxy_ef_tb',
				//显示分页栏
				pagination:true,
				//设置每页大小
				pageSize:5,
				//可选的每页大小
				pageList:[5,10,20,50],
				//只有当用户点击了复选框时，才会选中/取消选中复选框。
				checkOnSelect:true,
				//绑定一个点击表格事件
				//onClickCell:zxy_ef_onClickCell,
				//onAfterEdit:zxy_ef_onAfterEdit,
				//onClickRow:onClickRow,
			});
			
			$("#zxy_ef_cbtn").linkbutton({
				onClick:function(){
					var rows=$('#zxy_ef_dg').datagrid("getSelections");
					console.log(rows);
				}
			});
		});
	
		function zxy_ef_append(){
			$("#zxy_ef_win_form").form('clear');
			$("#zxy_ef_win_form").form({url:'../emp/addEmpFamilyInfo'});
			$("#zxy_ef_win").window({'title':'新增'});
			$("#zxy_ef_win").window('open');
			/* if (endEditing()){
			$('#zxy_ef_dg').datagrid('appendRow',{name:'',relationshipId:'',tel:'',fax:'',emil:'',address:'',remark:''});
			zxy_ef_editIndex = $('#zxy_ef_dg').datagrid('getRows').length-1;
			$('#zxy_ef_dg').datagrid('selectRow', zxy_ef_editIndex)
					.datagrid('beginEdit', zxy_ef_editIndex);
			} */
		}
		function zxy_ef_remove(){
			/* if (zxy_ef_editIndex == undefined){return} */
			/* $('#zxy_ef_dg').datagrid('cancelEdit', zxy_ef_editIndex)
					.datagrid('deleteRow', zxy_ef_editIndex);
			zxy_ef_editIndex = undefined; */
			$.messager.confirm("操作提示", "您确定要删除吗？", function (data) {
				if(data) {
					var rows=$("#zxy_ef_dg").datagrid("getChecked");
					var id_arr=[];
					for(var i=0;i<rows.length;i++){
						id_arr.push(rows[i].id);
					}
					id_arr=JSON.stringify(id_arr);
					$.ajax({
						url:'../emp/deleteEmpFamilyInfoById',
						data:{
							"id_arr":id_arr,
						},
						success:function(data){
							data=$.parseJSON(data);
					    	console.log(data);
					    	$.messager.alert("",data.msg);
					    	$("#zxy_ef_win").window('close');
					    	$("#zxy_ei_emp_family_info").panel('refresh','../emp/empFamilyInfo?empId='+zxy_ef_empId);
						}
					});
				}
			});
		}
		
		//编辑一行，将该行的数据填充进表单
		function zxy_ef_edit(){
			if($("#zxy_ef_dg").datagrid("getChecked").length!=1){
				$.messager.alert('操作提示','请选择一行进行编辑!');
				return;
			}
			$("#zxy_ef_win").form('clear');
			var row=$("#zxy_ef_dg").datagrid("getChecked")[0];
			console.log(row);
			$("#zxy_ef_win_form").form('load',row);
			$("#zxy_ef_win_form").form({url:'../emp/updateEmpFamilyInfoById'});
			$("#zxy_ef_relationship").combobox('setValue',row.relationshipSetting.relationshipId);
			$("#zxy_ef_win").window({'title':'编辑'});
			$("#zxy_ef_win").window('open');
		}

	</script>
</body>
</html>